// 初始化
$(function () {
    // 定义服务环境地址
    // var host = "http://127.0.0.1:7000";// 本地IP
    // var host = "http://47.92.204.130:7000";// 外网地址 http://47.92.204.130

    // 渲染图片
    $(".my_cover").attr("src", host + "/web.jpg");

    // 思路：
    // 1： 获取页面地址中的参数 detail.html?word=Framework
    // 2： 网络请求，获取后台数据
    // 3： 剖析数据并渲染

    // 编写函数 获取路页面路径中的参数
    function getUrlParams(key) {
        var str = location.search;// ?word=Framework
        str = str.slice(1);// word=Framework
        // console.log(str);

        // ?word=Framework&page=1&size=10
        // str = "word=Framework&page=1&size=10"

        var obj = {}
        if (str.includes("&")) {
            // 多个参数
            var data = str.split("&");
            for (var i = 0; i < data.length; i++) {
                var arr = data[i].split("=");
                var k = arr[0];
                var v = arr[1];
                obj[k] = v;
            }
        }
        else {
            // 一个参数
            var arr = str.split("=");
            var k = arr[0];
            var v = arr[1];
            obj[k] = v;
        }
        // 返回指定的参数值
        return obj[key];
    }
    var word = getUrlParams("word");
    // console.log(word);

    // 编写函数 获取后台数据
    function getDetailData(value) {
        $.ajax({
            url: host + "/detail",
            type: "GET",
            data: {
                word: value
            },
            success: function (resData) {
                console.log(resData);
                var result = resData.result;
                // 判断result是否有值
                if(result){
                    // 渲染词汇的详情信息
                    renderWordDetail(result);
                }
            },
            error: function (err) {
                console.log("失败", err)
            }
        })
    }

    // 获取词汇详情
    getDetailData(word);


    // 编写函数  剖析数据并渲染
    function renderWordDetail(obj) {
        var str = `
         <div class="text-danger" style="font-weight: bold;">
            <span>词汇: ${obj.word}</span>  
            <i data-text="${obj.word}" class="bi bi-volume-down"></i>
        </div>
        <div>
            <span>音标: ${obj.phonetic}</span>
        </div>
        <div>
            <span>翻译: ${obj.word}</span>
        </div>
        <div class="text-info">
            <span>词义: ${obj.meaning}</span>
        </div>
        <div class="text-primary">
            <span>引用句子:${obj.exampleSentence}</span>
            <i data-text="${obj.exampleSentence}" class="bi bi-volume-down"></i>
        </div>
        <div>
            句子翻译:${obj.sentenceTranslation}
        </div>
        `
        $(".my_card_body").html(str);
    }


     // 事件委托
     $(".my_card_body").on("click",".bi",function(){
        var text = $(this).attr("data-text");
        console.log("值:", text);
        // 调用朗读文本的方法
        speak(text);
    })


    // 点击返回
    $(".my_detail_button").click(function(){
        history.back();//返回上一个历史
    })

})


// - 请求地址: /detail
// - 请求方式: GET
// - 提交的参数:
//   参数名称      值类型      说明word         string     表示单词
// - 响应数据格式: json格式
// - 请求示例: http://127.0.0.1:7000/detail?word=JavaScript